<template>
    <el-form
        ref="formRef"
        :model="modelValue"
        :label-width="labelWidth"
        :label-position="labelPosition"
        :size="size"
        :disabled="disabled"
        @submit.prevent
    >
        <el-row :gutter="gutter">
            <template v-for="(item, index) in fields" :key="index">
                <el-col :span="item.span || span">
                    <el-form-item
                        :label="item.label"
                        :prop="item.prop"
                        :rules="item.rules"
                    >
                        <!-- 输入框 -->
                        <el-input
                            v-if="item.type === 'input'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            :clearable="item.clearable"
                            :maxlength="item.maxlength"
                            :minlength="item.minlength"
                            :show-word-limit="item.showWordLimit"
                        />

                        <!-- 下拉选择 -->
                        <el-select
                            v-else-if="item.type === 'select'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            :clearable="item.clearable"
                            :filterable="item.filterable"
                            :multiple="item.multiple"
                            :collapse-tags="item.collapseTags"
                            :collapse-tags-tooltip="item.collapseTagsTooltip"
                        >
                            <el-option
                                v-for="option in item.options"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                                :disabled="option.disabled"
                            />
                        </el-select>

                        <!-- 日期选择 -->
                        <el-date-picker
                            v-else-if="item.type === 'date'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            :type="item.dateType"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            :clearable="item.clearable"
                            :format="item.format"
                            :value-format="item.valueFormat"
                            :start-placeholder="item.startPlaceholder"
                            :end-placeholder="item.endPlaceholder"
                            :range-separator="item.rangeSeparator"
                        />

                        <!-- 级联选择 -->
                        <el-cascader
                            v-else-if="item.type === 'cascader'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            :options="item.options"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            :clearable="item.clearable"
                            :filterable="item.filterable"
                            :show-all-levels="item.showAllLevels"
                            :collapse-tags="item.collapseTags"
                            :collapse-tags-tooltip="item.collapseTagsTooltip"
                        />

                        <!-- 单选框 -->
                        <el-radio-group
                            v-else-if="item.type === 'radio'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            :disabled="item.disabled"
                        >
                            <el-radio
                                v-for="option in item.options"
                                :key="option.value"
                                :label="option.value"
                                :disabled="option.disabled"
                            >
                                {{ option.label }}
                            </el-radio>
                        </el-radio-group>

                        <!-- 复选框 -->
                        <el-checkbox-group
                            v-else-if="item.type === 'checkbox'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            :disabled="item.disabled"
                        >
                            <el-checkbox
                                v-for="option in item.options"
                                :key="option.value"
                                :label="option.value"
                                :disabled="option.disabled"
                            >
                                {{ option.label }}
                            </el-checkbox>
                        </el-checkbox-group>

                        <!-- 开关 -->
                        <el-switch
                            v-else-if="item.type === 'switch'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            :disabled="item.disabled"
                        />

                        <!-- 文本域 -->
                        <el-input
                            v-else-if="item.type === 'textarea'"
                            :model-value="modelValue[item.prop]"
                            @update:model-value="(val) => updateValue(item.prop, val)"
                            type="textarea"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            :maxlength="item.maxlength"
                            :minlength="item.minlength"
                            :show-word-limit="item.showWordLimit"
                            :autosize="item.autosize"
                        />
                    </el-form-item>
                </el-col>
            </template>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { FormInstance } from 'element-plus'
import type { UnionFormConfigType } from './types/UnionFormConfigType'

const props = defineProps<{
    modelValue: Record<string, any>
    fields: UnionFormConfigType[]
    labelWidth?: string
    labelPosition?: 'left' | 'right' | 'top'
    size?: 'large' | 'default' | 'small'
    disabled?: boolean
    gutter?: number
    span?: number
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: Record<string, any>): void
}>()

const formRef = ref<FormInstance>()

const updateValue = (prop: string, value: any) => {
    emit('update:modelValue', {
        ...props.modelValue,
        [prop]: value
    })
}

// 暴露方法
defineExpose({
    validate: () => formRef.value?.validate(),
    resetFields: () => formRef.value?.resetFields(),
    clearValidate: () => formRef.value?.clearValidate()
})
</script> 